<template>
	<view class="bookshelf-page">
		<!-- 书架统计 -->
		<view class="stats-card">
			<view class="stat-item">
				<text class="num">{{ books.length }}</text>
				<text class="label">藏书</text>
			</view>
			<view class="stat-item">
				<text class="num">{{ readingProgress }}%</text>
				<text class="label">阅读进度</text>
			</view>
			<view class="stat-item">
				<text class="num">{{ totalReadingTime }}</text>
				<text class="label">阅读时长</text>
			</view>
		</view>

		<!-- 书籍列表 -->

		<view class="book-list">
		    <!-- 空书架状态 -->
		    <view v-if="books.length === 0" class="empty-state">
		      <image src="https://via.placeholder.com/300x200/cccccc/666666/?text=Empty+Bookshelf" class="empty-icon" />
		      <text class="empty-text">书架空空如也，快去添加书籍吧！</text>
		    </view>
		
		    <!-- 书籍列表 -->
		    <view v-else v-for="(book, index) in books" :key="index" class="book-item" @longpress="showActionMenu(book)">
		      <image :src="book.cover" class="cover" />
		      <view class="info">
		        <text class="title">{{ book.title }}</text>
		        <text class="author">{{ book.author }}</text>
		        <!-- 阅读进度条 -->
		        <view class="progress-bar">
		          <view class="progress" :style="{ width: book.progress + '%' }"></view>
		        </view>
		        <text class="progress-text">已读 {{ book.progress }}%</text>
		      </view>
		    </view>
		  </view>

		<!-- 浮动按钮 -->
		<view class="float-btn" @click="scanBook">
			<text>+</text>
		</view>

		<!-- 操作菜单 -->
		<view v-if="showMenu" class="action-menu" @tap="hideActionMenu">
			<view class="menu-item" @tap.stop="removeBook">删除</view>
			<view class="menu-item" @tap.stop="markAsRead">标记已读</view>
			<view class="menu-item" @tap.stop="viewDetails">查看详情</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				books: uni.getStorageSync('bookshelf') || [],
				readingProgress: 0,
				totalReadingTime: '12h 30m',
				showMenu: false,
				selectedBook: null
			}
		},
		onShow() {
			this.calculateProgress()
		},
		methods: {
			calculateProgress() {
				const total = this.books.reduce((sum, book) => sum + book.progress, 0)
				this.readingProgress = (total / this.books.length).toFixed(1)
			},
			showActionMenu(book) {
				this.selectedBook = book
				this.showMenu = true
			},
			hideActionMenu() {
				this.showMenu = false
			},
			removeBook() {
				this.books = this.books.filter(b => b.id !== this.selectedBook.id)
				uni.setStorageSync('bookshelf', this.books)
				this.hideActionMenu()
			},
			markAsRead() {
				this.selectedBook.progress = 100
				uni.setStorageSync('bookshelf', this.books)
				this.hideActionMenu()
			},
			viewDetails() {
				uni.navigateTo({
					url: `/pages/book-detail/book-detail?id=${this.selectedBook.id}`
				})
				this.hideActionMenu()
			},
			scanBook() {
				uni.scanCode({
					success: (res) => {
						const bookInfo = this.parseISBN(res.result)
						this.books.push(bookInfo)
						uni.setStorageSync('bookshelf', this.books)
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* 页面容器 */
	.bookshelf-page {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	/* 书架统计 */
	.stats-card {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.stat-item {
		text-align: center;
	}

	.stat-item .num {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.stat-item .label {
		font-size: 24rpx;
		color: #999;
	}

	/* 书籍列表 */
	/* 空书架状态样式 */
	.empty-state {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  margin-top: 50rpx;
	}
	
	.empty-icon {
	  width: 300rpx;
	  height: 200rpx;
	  margin-bottom: 20rpx;
	}
	
	.empty-text {
	  font-size: 28rpx;
	  color: #666666;
	  text-align: center;
	}
	.book-list {
		margin-bottom: 100rpx;
	}

	.book-item {
		display: flex;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.book-item .cover {
		width: 150rpx;
		height: 200rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.book-item .info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.book-item .title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.book-item .author {
		font-size: 28rpx;
		color: #666;
	}

	.book-item .progress-bar {
		width: 100%;
		height: 10rpx;
		background-color: #eee;
		border-radius: 5rpx;
		overflow: hidden;
	}

	.book-item .progress {
		height: 100%;
		background-color: #007aff;
		border-radius: 5rpx;
	}

	.book-item .progress-text {
		font-size: 24rpx;
		color: #999;
	}

	/* 浮动按钮 */
	.float-btn {
		position: fixed;
		right: 40rpx;
		bottom: 100rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #007aff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 10rpx rgba(0, 122, 255, 0.3);
	}

	.float-btn text {
		font-size: 50rpx;
		color: #fff;
	}

	/* 操作菜单 */
	.action-menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.menu-item {
		background-color: #fff;
		padding: 30rpx;
		font-size: 32rpx;
		text-align: center;
		border-bottom: 1rpx solid #eee;
	}

	.menu-item:last-child {
		border-bottom: none;
	}
</style>